<template>
    <div>
        <el-table
                :data="tableData"
                ref="attentionTable"
                stripe
                border
                @selection-change="handleSelectionChange"
                style="width: 100%; margin-top: 10px;">
            <el-table-column
                    type="selection"
                    fixed="left"
                    width="40">
            </el-table-column>
            <el-table-column
                    type="index"
                    label="序号"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="portrait"
                    min-width="80"
                    label="封面图">
                <template v-slot:default="slotProps">
                    <img style="width: 70px;" :src="slotProps.row.coverImg" alt="封面图">
                </template>
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="标题">
            </el-table-column>
            <el-table-column
                    prop="authorName"
                    label="昵称">
            </el-table-column>
            <el-table-column
                    prop="videoUrl"
                    min-width="100"
                    label="视频链接">
            </el-table-column>
            <el-table-column
                    prop="likeCnt"
                    label="点赞量">
            </el-table-column>
            <el-table-column
                    prop="likeCnt"
                    label="总点赞数">
            </el-table-column>
            <el-table-column
                    label="操作">
                <template  v-slot:default="slotProps">
                    <el-button type="success" plain size="mini" @click="$emit('attention', slotProps.row)">点赞</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>

  import { TYPE_KV } from '@/utils/constant'
  import eventBus from "../../utils/eventBus";

  export default {
    name: 'tableList',
    props: {
      tableData: Array
    },
    mounted () {
      eventBus.$off('restTable')
      eventBus.$on('restTable', () => {
        if (this.$refs['attentionTable']) {
          this.$refs.attentionTable.clearSelection();
        }
      })
    },
    methods: {
      typeFormatter (row) {
        return TYPE_KV[row.type] || '-'
      },
      handleSelectionChange (val) {
        this.$emit('select', val)
      }
    }
  }
</script>

<style scoped>

</style>
